<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表格生成案例</title>
    <style>

    </style>
</head>
<body>
    <input type="button" value="获取数据" id="j_btnGetData">
    <table>
        <thead>
            <tr>
                <th>标题</th>
                <th>地址</th>
                <th>说明</th>
            </tr>
        </thead>
        <tbody id="j_tbData">

        </tbody>
    </table>
</body>
<script src="jquery-3.3.1.min.js"></script>
<script>
    var data = [
        {
        name:'孙笑川',
        url:'www.sunxiaochuan.net',
        type:'儒雅随和'},
        {
        name:'孙笑川',
        url:'www.sunxiaochuan.net',
        type:'儒雅随和'},
        {
        name:'孙笑川',
        url:'www.sunxiaochuan.net',
        type:'儒雅随和'},
    ];
    // $('#j_btnGetData').click(function () {
    //     var list = [];
    //     for(var i = 0; i < data.length; i++){
    //         // 生成tr
    //         list.push('<tr>');
    //         for(var key in data[i]){
    //             list.push('<td>');
    //             list.push(data[i][key]);
    //             list.push('</td>');
    //         }
    //         list.push('</tr>');
    //     }
    //     $('#j_tbData').html(list.join(''))
    // })

    $('#j_btnGetData').click(function () {
        for (var i = 0; i < data.length; i++) {
            var $tr = $('<tr><td>' + data[i]['name'] + '</td><td>' + data[i]['url'] + '</td><td>' + data[i]['type'] + '</td></tr>');
            $('#j_tbData').append($tr)
        }
    })
</script>
</html>